<template>
	<view>
		<map :markers="markers" id="map" :longitude="longitude" :latitude="latitude" scale="14">


		</map>
		<view class="catalog">
			<view :class="['item',index==currentInd?'active':'']" v-for="(item,index) in aroundType" :key="index"
				@click="getKeyword(index)">
				<view :class="'iconfont icon-'+item.icon"></view>
				<view>{{item.text}}</view>
			</view>

		</view>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				//bus metro university hospital retail restaurant bank leisure
				houseMarkers:[],
				longitude:-0.258282,
				latitude:51.522905,
				markers: [],
				currentInd: 0,
				aroundType: [{
					text: "公交",
					icon: "gongjiaoche",
					keyword: "bus",
				}, {
					text: "地铁",
					icon: "ditie",
					keyword: "metro",
				}, {
					text: "学校",
					icon: "xuexiao",
					keyword: "university",
				}, {
					text: "医院",
					icon: "yiyuan",
					keyword: "hospital",
				}, {
					text: "购物",
					icon: "shouye",
					keyword: "retail",
				}, {
					text: "餐饮",
					icon: "canyincanju",
					keyword: "restaurant",
				}, {
					text: "银行",
					icon: "yinhangka",
					keyword: "bank",
				}, {
					text: "休闲",
					icon: "yule",
					keyword: "leisure",
				}],
			}
		},
		onLoad(option) {
		     console.log(option)
			 
			 
			 if(option.index){
				this.currentInd = option.index
			 }
			 this.latitude = parseFloat(option.latitude) 
			 this.longitude = parseFloat(option.longitude)
			 this.houseMarkers = [{
			 		id: 1, // Number
			 		title: '', // String-标注点名
			 		alpha: 1, // 默认1，无透明，范围 0 ~ 1
			 		latitude: this.latitude,
			 		longitude: this.longitude,
			 		width: 30,
			 		height: 30,
			 		iconPath: '/static/icon/location/location1.png', // 显示的图标
			 	}]
			this.getAround(this.aroundType[this.currentInd].keyword);
			
		},
		methods: {
			getKeyword(e) {
				this.currentInd = e
				this.getAround(this.aroundType[e].keyword);
			},
			getAround(keyword) {
			  console.log(keyword)
			  let that = this
			  
			  wx.request({
			    url: 'https://apis.map.qq.com/ws/place/v1/search',
			    data: {
			      key: 'HQCBZ-XU2KU-3OYVQ-4QYLZ-QKMCJ-A6BGJ',
			      keyword: keyword,
			      boundary: 'nearby(' + that.latitude + ',' + that.longitude + ',2000)'
			    },
			    header: {
			      'content-type': 'application/json'
			    },
			    success(res) {
			      console.log(res);
				  var markers = that.deepClone(that.houseMarkers);
				  var num = that.markers.length + 1;
			      for (var o of res.data.data) {
					  markers.push({
					    id: o.id,
					    iconPath: '/static/icon/location/location2.png',
					    latitude: o.location.lat,
					    longitude: o.location.lng,
					    title: o.title,
					    width: 30,
					    height: 30,
					    callout: {
					      content: o.title + '\r\n距离此公寓距离约' + parseInt(o._distance) + 'm',
					      color: '#333',
					      fontSize: 14,
					      padding: 8,
					      display: 'BYCLICK',
					      textAlign: 'center'
					    }
					  })
					  
				  }
				  that.markers = markers
				  console.log(that.markers)
				  that.houseMarkers = that.houseMarkers
			    },
			    fail(res) {
			      console.log(res)
			    }
			  })
			
			},
			deepClone(initalObj) {
			  var obj = {};
			  obj = JSON.parse(JSON.stringify(initalObj));
			  return obj;
			},
		}
	}
</script>

<style lang="scss">
	map {
		width: 100%;
		height: calc(100vh - 90rpx);


	}

	.catalog {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		z-index: 1000;
		padding-bottom: 30rpx;
	}

	.catalog .item {
		width: 12.5%;
		color: #666666;
		text-align: center;
		font-size: 26rpx;
		margin-top: 8rpx;
	}

	.catalog .item .iconfont {
		font-size: 40rpx;
	}

	.catalog .item.active {
		color: #B7A369;
	}

	.page-section-gap {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.page-body-button {
		margin-bottom: 30rpx;
	}

	.customCallout {
		box-sizing: border-box;
		background-color: #fff;
		display: inline-flex;
		justify-content: start;
		width: 469rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 20rpx rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;
		position: relative;
	}

	.content-house-cover {
		width: 160rpx;
		height: 140rpx;
		margin: 17rpx 10rpx 20rpx 16rpx;
		position: relative;
	}

	.house-cover {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}


	.content {
		width: 265rpx;
		height: 140rpx;
		margin-top: 17rpx;
	}

	.house_name {
		width: 265rpx;
		height: 80rpx;
		line-height: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #292929;
		/* white-space: normal; */
		/* display: inline; */
		white-space: pre-wrap;
		/* word-break: break-word; */
		/* display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden; */
	}


	.bottom-content {
		width: 265rpx;
		height: 46rpx;
		position: absolute;
		bottom: 20rpx;
		left: 185rpx;
		z-index: 999;
		display: flex;
		justify-content: space-between;
	}

	.price {
		height: 46rpx;
		line-height: 46rpx;
		font-size: 28rpx;
		color: #E0B485;
	}

	.btn {
		width: 130rpx;
		height: 46rpx;
		line-height: 46rpx;
		text-align: center;
		background: #E0B485;
		border-radius: 44rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		margin: 0;
	}



	@font-face {
		font-family: "iconfont";
		/* Project id 3016574 */
		src: url('//at.alicdn.com/t/font_3016574_b4ya75cdmcs.woff2?t=1639475441983') format('woff2'),
			url('//at.alicdn.com/t/font_3016574_b4ya75cdmcs.woff?t=1639475441983') format('woff'),
			url('//at.alicdn.com/t/font_3016574_b4ya75cdmcs.ttf?t=1639475441983') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-xuexiao:before {
		content: "\e659";
	}

	.icon-ditie:before {
		content: "\e602";
	}

	.icon-yinhangka:before {
		content: "\e8bf";
	}

	.icon-yiyuan:before {
		content: "\e641";
	}

	.icon-yule:before {
		content: "\e699";
	}

	.icon-shouye:before {
		content: "\e61a";
	}

	.icon-yiyuan1:before {
		content: "\e859";
	}

	.icon-canyincanju:before {
		content: "\e64c";
	}

	.icon-gongjiaoche:before {
		content: "\e68b";
	}
</style>
